<template>
    <el-row justify="end">
    <el-button @click="openForm">
      <Icon class="mr-5px" icon="ep:edit" />
      {{ techdefense.id ? '编辑技防信息' : '新增技防信息' }}
    </el-button>
  </el-row>

  <el-row :gutter="20">
    <el-col :span="14" :xs="24">
      <ContentWrap>
        <el-collapse v-model="activeNames" class="">
          <el-collapse-item name="basicInfo">
            <template #title>
              <span class="text-base font-bold">基本信息</span>
            </template>
            <el-descriptions :column="4">
              <el-descriptions-item label="安消融合服务合同结束日期">
                {{ formatDate(techdefense.endDate, 'YYYY-MM-DD') }}
              </el-descriptions-item>
            </el-descriptions>
          </el-collapse-item>
        </el-collapse>
      </ContentWrap>
    </el-col>
    <!-- 右侧操作日志 -->
    <el-col :span="10" :xs="24">
      <OperateLogV2 :log-list="logList" />
    </el-col>
  </el-row>


  <label class="font-bold">用电探测装置安装情况</label>
  <TechDefenseElectricalList :key="techDefenseElectricalListRefKey" ref="techDefenseElectricalListRef" :techdefense="techdefense" />
  <label class="font-bold">可燃气体探测器安装情况</label>
  <TechDefenseGasList :key="techDefenseGasListRefKey" ref="techDefenseGasListRef" :techdefense="techdefense" />
  <label class="font-bold">氰化氢气体检测安装情况</label>
  <TechDefenseHcnList :key="techDefenseHcnListRefKey" ref="techDefenseHcnListRef" :techdefense="techdefense" />
  <label class="font-bold">烟感安装情况</label>
  <TechDefenseSmokeList :key="techDefenseSmokeListRefKey" ref="techDefenseSmokeListRef" :techdefense="techdefense" />
  <label class="font-bold">危险源/重点消防部位管理信息</label>
  <TechDefenseManageList :key="techDefenseManageListRefKey" ref="techDefenseManageListRef" :techdefense="techdefense" />
  <label class="font-bold">企业危险源及消防示意图</label>
  <TechDefenseMapList :key="techDefenseMapListRefKey" ref="techDefenseMapListRef" :techdefense="techdefense" />
  <ContentWrap>
    <el-collapse v-model="activeNames" class="">
      <el-collapse-item name="systemInfo">
        <template #title>
          <span class="text-base font-bold">系统信息</span>
        </template>
        <el-descriptions :column="4">
          <el-descriptions-item label="创建人">{{ techdefense.creatorName }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ formatDate(techdefense.createTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="修改人">{{ techdefense.updaterName }}</el-descriptions-item>
          <el-descriptions-item label="修改时间">
            {{ formatDate(techdefense.updateTime) }}
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
    </el-collapse>
  </ContentWrap>
    <!-- 表单弹窗：添加 -->
    <TechDefenseForm ref="formRef" @success="refresh" />
</template>
<script lang="ts" setup>
import { TechDefenseApi,TechDefenseVO } from '@/api/crm/tech_defense'
import { formatDate } from '@/utils/formatTime'
import { BizTypeEnum } from '@/api/crm/permission'
import type { OperateLogVO } from '@/api/system/operatelog'
import { getOperateLogPage } from '@/api/crm/operateLog'
import TechDefenseElectricalList from '@/views/crm/tech_defense/components/TechDefenseElectricalList.vue'
import TechDefenseGasList from '@/views/crm/tech_defense/components/TechDefenseGasList.vue'
import TechDefenseHcnList from '@/views/crm/tech_defense/components/TechDefenseHcnList.vue'
import TechDefenseSmokeList from '@/views/crm/tech_defense/components/TechDefenseSmokeList.vue'
import TechDefenseManageList from '@/views/crm/tech_defense/components/TechDefenseManageList.vue'
import TechDefenseMapList from '@/views/crm/tech_defense/components/TechDefenseMapList.vue'
import TechDefenseForm from '@/views/crm/tech_defense/TechDefenseForm.vue'

defineOptions({ name: 'TechDefenseDetail' })
const props = defineProps<{ id?: number,bizId?: number }>()
const route = useRoute();
const formRef = ref()
const formLoading = ref(false) // 表单的加载中
const techdefense = ref<TechDefenseVO>({} as TechDefenseVO) // 技防信息详情
const techDefenseElectricalListRefKey = ref(new Date().getTime())
const techDefenseGasListRefKey = ref(new Date().getTime())
const techDefenseHcnListRefKey = ref(new Date().getTime())
const techDefenseSmokeListRefKey = ref(new Date().getTime())
const techDefenseManageListRefKey = ref(new Date().getTime())
const techDefenseMapListRefKey = ref(new Date().getTime())
const openForm = () => {
  formRef.value.open(techdefense.value.id ? 'update' : 'create', techdefense.value.id, props.bizId)
}
/** 监听主表的关联字段的变化，加载对应的子表数据 */
watch(
  () => props.bizId,
  async (val) => {
    if (!val) {
      return;
    }
    try {
      formLoading.value = true
      const data = await TechDefenseApi.getTechDefenseByCustomerId(val)
      if (!data) {
        return
      }
      techdefense.value = data
      await getOperateLog()
    } finally {
      formLoading.value = false
    }
  },
  { immediate: true }
)
const activeNames = ref(['basicInfo', 'systemInfo']) // 展示的折叠面板
const refresh = async () => {
  techDefenseElectricalListRefKey.value = new Date().getTime()
  techDefenseGasListRefKey.value = new Date().getTime()
  techDefenseHcnListRefKey.value = new Date().getTime()
  techDefenseSmokeListRefKey.value = new Date().getTime()
  techDefenseManageListRefKey.value = new Date().getTime()
  techDefenseMapListRefKey.value = new Date().getTime()
  try {
    formLoading.value = true
    const data = await TechDefenseApi.getTechDefenseByCustomerId(props.bizId)
    if (!data) {
      return
    }
    techdefense.value = data
  } finally {
    formLoading.value = false
  }
}

/** 获取操作日志 */
const logList = ref<OperateLogVO[]>([]) // 操作日志列表
const getOperateLog = async () => {
  if (!techdefense.value.id) {
    return
  }
  const data = await getOperateLogPage({
    bizType: BizTypeEnum.CRM_TECHDEFENSE,
    bizId: techdefense.value.id
  })
  logList.value = data.list
}

/** 初始化 */
onMounted(async () => {
  const id = props.id || route.params.id
  const customerId = props.bizId
  try {
    formLoading.value = true
    if(customerId){
      const data = await TechDefenseApi.getTechDefenseByCustomerId(customerId)
      if (!data) {
        return
      }
      techdefense.value = data
    } else {
      if(id){
        const data = await TechDefenseApi.getTechDefense(id)
        if (!data) {
          return
        }
        techdefense.value = data
      }
    }
  } finally {
    formLoading.value = false
  }
})
</script>
